<template>
  <div>
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow
    />
    <div>
      <img :src="info.img" alt="" />
    </div>
    <div>商品价格：{{ info.price }}</div>
    <div>商品名称：{{ info.goodsname }}</div>
    <div>商品数量：{{ num }}</div>
    <div id="desc" v-html="info.description"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        @click="addCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { goodsInfo, addCart } from "../request/api";
import { Dialog } from "vant";
export default {
  data() {
    return {
      info: {},
      num: 1, //商品数量
    };
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  mounted() {
    //获取当前商品详情接口
    goodsInfo({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res, "商品详情");
      if (res.code == 200) {
        this.info = res.list[0];
      }
    });
  },
  methods: {
    //封装一个加入购物车事件
    addCart() {
      // this.$router.push('/cart')
      /* 
      购物车界面，必须登录才可以看见，否则无法调用添加购物车接口
      根据仓库中登录信息的存值情况进行判断
      */
      if (this.getUser) {
        //调用加入购物车接口
        // console.log('准备加入购物车了');
        addCart({
          uid: this.getUser.uid,
          goodsid: this.info.id,
          num: this.num,
        }).then((res) => {
          // console.log(res, "加入购物车");
          if(res.code==200){
            this.$router.push('/cart')
          }
        });
      } else {
        Dialog.confirm({
          title: "",
          message: "没有登录无权限加入购物车，你要去登录吗？",
        })
          .then(() => {
            //点击确定 跳转到登录组件
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //封装一个加入订单事件
    goBuy() {
      //跳转到订单组件
      this.$router.push("/order");
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
#desc >>> img {
  width: 100%;
}
</style>
